<template>
	<view>
		<mescroll-uni ref="mescrollRef" top="120px" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view class="p-l-30 p-r-30 ">
				<!-- <view class="m-t-15"  :key="item.id"
				 v-for="item in orderList"
				 >
				 
					<view class="flex m-b-18">
						<view class="md bold m-r-10">{{item.date}}</view>
						<view><u-icon name="arrow-down" size="30"></u-icon></view>
					</view>
					<view class="bold xs m-b-20" style="color: #b6b5b4;">
						{{item.orderNum}}个订单，共{{item.totail}}元
					</view>
					
				</view> -->
				<block v-for="item2 in orderList">
					<ordertype-list :item="item2" :isGo="false" ></ordertype-list>
					<!-- <transport-item :item="item2" :isGo="false"></transport-item> -->
				</block>
			</view>
			
		</mescroll-uni>
	</view>
</template>

<script>
	import {transportList} from '@/api/user'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		name:"transport-list",
		data() {
			return {
				orderList:[],
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-e06d9f07-22c4-452d-8fbb-6dcc4e87be48/f7d4219c-dfa3-4e8a-b6de-3fd68651d4e8.png',
						tip: '目前没有相应的订单~', // 提示
						fixed: true
					}
				},
			};
		},
		props: {
			orderType: {
				type: String
			}
		},
		created() {
			uni.$on("refreshorder", () => {
				this.downCallback()
			})
			uni.$on("refreFun", () => {
				
				this.downCallback()
			})
		},
		destroyed() {
			uni.$off("refreshorder")
		},
		methods:{
			refreFun(){
				this.downCallback()
			},
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let  {orderType} = this;
			
				
				transportList({
					page_size: pageSize,
					page_no: pageNum,
					status:orderType
				}).then(({
					data
				}) => {
					let curPageData = data.lists;
					let curPageLen = curPageData.length;
					let hasNext = !!data.more;
					if (page.num == 1) this.orderList = [];
					this.orderList = this.orderList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
		}
	
	}
</script>

<style scoped lang="scss">
	.item2{
		box-shadow: 0uxp 10rpx 10rpx 0rpx #ededed;
		margin-bottom: 35rpx;
		.status-1{
			color: #ffa200;
			background-color: #fff1d9;
			padding: 12rpx 20rpx;
			border-radius: 10rpx 20rpx 10rpx 20rpx;
		}
		.status-2{
			color: #eb7054;
			background-color: #fce6e0;
			padding: 12rpx 20rpx;
			border-radius: 10rpx 20rpx 10rpx 20rpx;
		}
		.status-3{
			color: #2da88f;
			background-color: #e0f2ee;
			padding: 12rpx 20rpx;
			border-radius: 10rpx 20rpx 10rpx 20rpx;
		}
		.add{
			position: relative;
			padding: 30upx 30upx 26upx 55upx;
			height: 110upx;
			border-radius: 20upx;
			background-color: #f3f4f5;
			.send-tap{
				position: absolute;
				top: 0;
				left: 0;
				image{
					width: 60upx;
					height: 60upx;
				}
				
			}
			.comment{
				color: #a0a0a0;
			}
			.map{
				image{
					width: 35upx;
					height: 35upx;
				}
			}
		}
		.order_price{
			color: #e85732;
			.price_icon{
				font-size: 18rpx;
			}
		}
		.order_detail{
			color: #e85732;
			border:1rpx solid #e85732;
			border-radius: 20rpx;
			padding: 16rpx 26rpx;
		}
	}
	
</style>
